<template>
    <el-dialog :title="$t('system.changeLanguage')" width="450px"  :visible.sync="show" :before-close="closeForm" append-to-body>

            <el-table :data="languages" >
                <el-table-column width="60px" align="center">
                <!-- label非常重要 -->
                <template v-slot="props">
                    <el-radio
                    v-model="selectId"
                    :label="props.row.id"
                    @change="handleRowChange(props.row)"
                    >{{""}}</el-radio>
                </template>
                </el-table-column>
                <el-table-column :label="$t('system.language')" prop="remark"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer" style="margin-top: 20px; align-items: right;">
				<el-button :size="size" @click="closeForm" type="primary">{{$t('system.close')}}</el-button>
			</div>

    </el-dialog>
</template>
<script>
import { list } from '@/api/admin/language'
export default {
name:'language',
components: {
},
props: {
    show: {
        type: Boolean,
        default: false
    },
    size: {
			type: String,
			default: false
		},
},
data(){
    
    return {
        languages:[],
        selectId: '',
        selected: this.$i18n.locale,
    }
},

methods: {

    getLanguages(){
        this.loading = true
        list().then(res=>{
            if(res.status == 200){
                      this.languages=res.data;

                      this.languages.forEach(element => {
                        if(element.code==this.selected){
                            this.selectId=element.id

                        }
                      });
                    }
                }).catch(()=>{
                    this.loading = false
             })

        },

 
    handleRowChange(row){

        if(this.selected !=row.code){
            this.$i18n.locale=row.code
            localStorage.setItem("locale",row.code)
            this.selected=row.code
        }
         
    },
    closeForm(){
        this.$emit('update:show', false)
        this.loading = false
      
    },
},
    mounted() {
        this.getLanguages()
    },

}

</script>
